<!-- 引导页面 -->
<template>
	<view class="steer">
		<swiper  :indicator-dots="true" :duration="1000">
			<swiper-item v-for="(itme,indedx) in datas">
				<view class="swiper-item">
					<view>{{itme.text}}</view>
					<view>
						<image :src="itme.url" mode=""></image>
					</view>
					<view v-if="indedx==datas.length-1" class="v-button">
						<button @click="Jump()">立即体验</button>
					</view>
				</view>
			</swiper-item>
		</swiper>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//sole(唯一)
				sole:false,
				
				datas:[
					{
						'text':"多种品类、优选商品",
						'url':"/static/steer-1.png"
					},
					{
						'text':"品质保障、安全放心",
						'url':"/static/steer-2.png"
					},
					{
						'text':"绿色有机、天然形成",
						'url':"/static/steer-3.png"
					},
					{
						'text':"轻松选购、邮寄到家",
						'url':"/static/steer-4.png"
					}
				]
			
			}
		},
		methods: {
			Jump(){
				console.log('跳转-->');
				this.sole=true;
				console.log(this.sole);
				uni.switchTab({
					url:'/pages/index/index',
					success: () => {
					          console.log('跳转成功'); // 添加成功回调
					}
				})
			}
		},
		mounted() {
			if(sole){
			  this.Jump();
			}
		}
		
	}
</script>



<style scoped>
	.steer{
		width: 750rpx;
		height: 100vh;
		background-color: #edffd8;
	}
	.steer swiper{
		width: 100%;
		height: 100%;
		
	}
	.swiper-item{
		position: absolute;
		left: 50%;
		top: 40%;
		transform: translate(-50%, -40%); /* 双向反向偏移 */
		/* background-color: antiquewhite; */
		
	}
	.swiper-item view{
		text-align: center;
	}
	.v-button{
		margin: 200rpx 0 0 0;
		
	}
	.v-button button{
		width: 400rpx;
		background-color: #00b70c;
	}

</style>
